<template>
  <div>
    <template>
      <el-button type="danger" style="margin-bottom:5px" @click="batchChangeState" icon="el-icon-s-release">批量禁/反禁用</el-button>
      <el-button type="primary" @click="handleAdd" icon="el-icon-circle-plus">新增产品</el-button>
      <el-table
        :data="tableData.filter(data => !search || data.sname.toLowerCase().includes(search.toLowerCase())
                                                || data.types.tname.toLowerCase().includes(search.toLowerCase())
                                                || data.brands.bname.toLowerCase().includes(search.toLowerCase())
                                                || data.sproducer.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%; padding-bottom: 3px"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange"
        >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="编号" prop="sid" type="index"></el-table-column>
        <el-table-column label="类型" prop="types.tname" width="180" sortable :filters="typeList" :filter-method="filterHandler" ></el-table-column>
        <el-table-column label="品牌" prop="brands.bname" width="180" sortable :filters="brandList" :filter-method="filterHandler"></el-table-column>
        <el-table-column label="名称" prop="sname" sortable>
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <el-descriptions title="信息:" :column="3" border>
                <el-descriptions-item label="名称" content-class-name="my-content">{{ scope.row.sname }}</el-descriptions-item>
                <el-descriptions-item label="累计销售量"><el-tag size="medium">{{ scope.row.stimessold }}</el-tag></el-descriptions-item>
                <el-descriptions-item label="品牌">{{ scope.row.brands.bname }}</el-descriptions-item>
                <el-descriptions-item label="现价">
                  <el-tag size="small">{{ scope.row.sdiscount }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="性别">{{ scope.row.sgender }}</el-descriptions-item>
                <el-descriptions-item label="颜色">{{ scope.row.color.cname }}</el-descriptions-item>
              </el-descriptions>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.sname }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="sprices" label="原价" width="100" sortable>
          <template slot-scope="scope">
            <span>{{scope.row.sprices | rounding}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sproducer" label="产地" sortable :filters="producerList" :filter-method="filterHandler">
        </el-table-column>
        <el-table-column
          prop="sgender"
          label="性别"
          sortable
          :filters="[
            { text: '男款', value: '男' },
            { text: '女款', value: '女' }
          ]"
          :filter-method="filterHandler">
        </el-table-column>
        <el-table-column prop="color.cname" label="颜色" sortable :filters="colorList" :filter-method="filterHandler"></el-table-column>
        <el-table-column label="禁用状态" prop="sdelete" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.sdelete" @change="changeState(scope.row.sid, scope.row.sdelete)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot="header">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"
              clearable/>
          </template>
          <template slot-scope="scope">
            <el-button size="mini" active-value="1" inactive-value="0" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pagination.pageNum"
          :page-sizes="[5, 10, 50, 100]"
          :page-size.sync="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.count"
        >
        </el-pagination>
      </div>
    </template>
    <shoes-info v-if="dialogInfoVisible" :title="title" :shoes="shoes" :dialogVisible="dialogInfoVisible" @successCallback="successCallback"/>
  </div>
</template>

<script>
import Sortable from "sortablejs"
import ShoesInfo from "./shoesInfo.vue"
import shoe from "../../../api/apis/product/shoes"
import execute from "../../../utils/constant/execute"
import stateCode from "../../../utils/constant/stateCode"

export default {
  name: "shoesTable",
  components: {ShoesInfo},
  data () {
    return {
      tableData: [],
      pagination: { pageNum: 1, pageSize: 5, count: 100 },
      search: "",
      dialogInfoVisible: false,
      title: "",
      color: {},
      typeList: [],
      brandList: [],
      colorList: [],
      producerList: [],
      shoes: {},
      multipleSelection: []
    }
  },
  methods: {
    handleEdit (index, row) {
      this.$message({ showClose: true, message: "准备修改鞋子", type: execute.SUCCESS })
      shoe.fetchGetShoesById(row.sid).then((res) => {
        this.shoes = res.data.data
        this.dialogInfoVisible = true
      })
      this.title = "鞋子修改"
    },
    handleAdd () {
      this.dialogInfoVisible = true
      this.shoes = {}
      this.title = "鞋子新增"
    },
    successCallback () {
      this.loadData()
      this.dialogInfoVisible = false
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    changeState (sid, sdelete) {
      let formData = { "sid": sid, "sdelete": sdelete ? "1" : "0" }
      shoe.fetchEditShoes(formData).then((res) => {
        if (res.data.code === stateCode.OPRATION_SUCCESS) {
          this.$message({ type: execute.SUCCESS, message: res.data.msg })
        } else {
          this.$message({ type: execute.WARNING, message: res.data.msg })
        }
      }).catch((res) => {
        this.$message({
          showClose: true,
          message: res.data.msg,
          type: execute.ERROR
        })
      })
    },
    filterTag (value, row) {
      return row.tag === value
    },
    filterHandler (value, row, column) {
      const property = column["property"]
      if (property === "types.tname") {
        return row.types.tname === value
      } else if (property === "brands.bname") {
        return row.brands.bname === value
      } else if (property === "color.cname") {
        return row.color.cname === value
      } else {
        return row[property] === value
      }
    },
    handleSizeChange (pageSize) {
      let params = new FormData()
      params.append("pageNum", 1)
      params.append("pageSize", pageSize)
      this.loadData(params)
    },
    handleCurrentChange (pageNum) {
      let params = new FormData()
      params.append("pageNum", pageNum)
      this.loadData(params)
    },
    tableRowClassName ({row}) {
      return row.sdelete ? "lock" : ""
    },
    batchChangeState () {
      this.$confirm("请谨慎批量禁/反禁用操作, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: execute.WARNING,
        center: true
      }).then(() => {
        for (let data of this.multipleSelection) {
          data.sdelete = data.sdelete ? "1" : "0"
        }
        shoe.fetchBatchChangeState(this.multipleSelection).then((res) => {
          if (res.data.code === stateCode.OPRATION_SUCCESS) {
            this.$message({ type: execute.SUCCESS, message: res.data.msg })
          } else {
            this.$message({ type: execute.INFO, message: res.data.msg })
          }
          this.loadData()
        }).catch((res) => {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: execute.ERROR
          })
        })
      }).catch((res) => {
        this.$message({
          showClose: true,
          message: res.data.msg,
          type: execute.ERROR
        })
      })
    },
    loadData (params) {
      params = new FormData()
      if (this.pagination.pageNum !== undefined && this.pagination.pageSize !== undefined) {
        params.append("pageNum", this.pagination.pageNum)
        params.append("pageSize", this.pagination.pageSize)
      }

      shoe.fetchGetShoesByPage(params).then((res) => {
        this.pagination.pageNum = res.data.data.pageNum
        this.pagination.count = res.data.data.count
        this.tableData = res.data.data.result
        for (let data of this.tableData) {
          if (data.sdelete === 1) {
            data.sdelete = true
          } else {
            data.sdelete = false
          }
        }
      })
      shoe.fetchGetShoesTypesByPage(params).then((res) => {
        let typeData = []
        for (let type of res.data.data) {
          typeData.push({text: type.tname, value: type.tname})
        }
        this.typeList = typeData
      })
      shoe.fetchGetShoesBrandsByPage(params).then((res) => {
        let brandData = []
        for (let brand of res.data.data) {
          brandData.push({text: brand.bname, value: brand.bname})
        }
        this.brandList = brandData
      })
      shoe.fetchGetShoesColorsByPage(params).then((res) => {
        let colorData = []
        for (let color of res.data.data) {
          colorData.push({text: color.cname, value: color.cname})
        }
        this.colorList = colorData
      })
      shoe.fetchGetShoesProducerByPage(params).then((res) => {
        let producerData = []
        for (let producer of res.data.data) {
          producerData.push({text: producer, value: producer})
        }
        this.producerList = producerData
      })
    }
  },
  filters: {
    rounding (value) {
      return value.toFixed(2)
    }
  },
  created () {
    this.loadData()
  },
  mounted () {
    let el = document.querySelectorAll(
      ".el-table__body-wrapper > table > tbody"
    )[0]
    this.sortable = Sortable.create(el)
  }
}
</script>

<style>
.sortable-ghost {
  opacity: 0.9;
}
.sortable-ghost td {
  border-top: 1px dashed #666666 !important;
  border-bottom: 1px dashed #666666 !important;
  color: #fff !important;
}
.sortable-ghost td:first-child {
  border-left: 1px dashed #666666 !important;
}
.sortable-ghost td:last-child {
  border-right: 1px dashed #666666 !important;
  border-bottom: 1px dashed #666666 !important;
}
.my-content {
  background: #FDE2E2;
}
.el-table .lock {
  background: rgb(255, 214, 214);
}
</style>
<style lang="scss">
p.dragtabe {
  margin-top: 30px;
}
</style>
